<template>
  <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="场馆名称" prop="venueName"><el-input v-model="form.venueName" placeholder="请输入场馆名称" /></el-form-item>
        <el-form-item label="场馆地址" prop="venueAddress"><el-input v-model="form.venueAddress" placeholder="请输入场馆地址" /></el-form-item>
        <el-form-item label="场馆负责人" prop="managerName"><el-input v-model="form.managerName" placeholder="请输入场馆负责人" /></el-form-item>
        <el-form-item label="场馆负责人电话" prop="managerTelno"><el-input v-model="form.managerTelno" placeholder="请输入场馆负责人电话" /></el-form-item>
        <el-form-item label="联系电话" prop="venueTelno"><el-input v-model="form.venueTelno" placeholder="请输入联系电话" /></el-form-item>
        <el-form-item label="营业时间" prop="businessStart">
          <el-time-select
            v-model="form.businessStart"
            :max-time="form.businessEnd"
            class="mr-4"
            placeholder="00:00"
            start="00:00"
            end="23:30"
          />
        </el-form-item>
        <el-form-item label="闭店时间" prop="businessEnd">
          <el-time-select
            v-model="form.businessEnd"
            :min-time="form.businessStart"
            class="mr-4"
            placeholder="00:00"
            start="00:00"
            end="23:30"
          />
        </el-form-item>
        <el-form-item label="是否关联到余额" prop="relateToBalance">
          <el-radio-group v-model="form.relateToBalance">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="场馆坐标（经纬度）">
          <el-input v-model="form.lal">
            <template #append>
              <a target="_blank" href="https://lbs.qq.com/getPoint/">坐标拾取</a>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="场馆介绍" prop="introdution">
          <editor v-model="form.introdution" :min-height="190" />
        </el-form-item>
        <el-form-item label="充值提示" prop="rechargeNotice"><el-input v-model="form.rechargeNotice" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" /></el-form-item>
        <el-form-item label="是否允许退订(普通)" prop="commonCanCancel">
          <el-select v-model="form.commonCanCancel">
            <el-option value="0" label="不可以退订" />
            <el-option value="1" label="可以退订" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.commonCanCancel==1" label="退订次数限制(普通)">
          <div class="tdFlex">
            <el-select v-model="form.commonCancelLimitType" class="mr10">
              <el-option value="0" label="每日" />
              <el-option value="3" label="每月" />
              <el-option value="1" label="累计" />
              <el-option value="2" label="无" />
            </el-select>
            <el-input v-model="form.commonCancelLimitTime" type="number">
              <template #append>
                次
              </template>
            </el-input>
          </div></el-form-item>
        <el-form-item label="是否允许退订(会员)" prop="memberCanCancel">
          <el-select v-model="form.memberCanCancel">
            <el-option value="0" label="不可以退订" />
            <el-option value="1" label="可以退订" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.memberCanCancel==1" label="退订次数限制(会员)">
          <div class="tdFlex">
            <el-select v-model="form.memberCancelLimitType" class="mr10">
              <el-option value="0" label="每日" />
              <el-option value="3" label="每月" />
              <el-option value="1" label="累计" />
              <el-option value="2" label="无" />
            </el-select>
            <el-input v-model="form.memberCancelLimitTime" type="number">
              <template #append>
                次
              </template>
            </el-input>
          </div></el-form-item>
        <el-form-item><el-button type="primary" @click="submitForm">保存</el-button></el-form-item>

      </el-col>
      <el-col :span="12">
        <el-form-item label="场馆logo" prop="venueLogo">
          <ImageUpload v-model="form.venueLogo" :limit="1" />
        </el-form-item>
        <el-form-item label="场馆图片" prop="venuePic">
          <ImageUpload v-model="form.venuePic" :limit="10" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { reactive } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { venueBasicEdit } from '@/api/ven/index'
import { toRefs } from '@vueuse/shared'
import useVenStore from '../../../../../store/modules/ven'
import { computed } from '@vue/reactivity'


const { proxy } = getCurrentInstance()
const venStore = useVenStore()

const data = reactive({
  rules: {
    venueName: { required: true, message: '请输入场馆名称', trigger: 'blur' },
    managerTelno: { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    businessStart: { required: true, message: '请输入营业时间', trigger: 'blur' },
    businessEnd: { required: true, message: '请输入闭店时间', trigger: 'blur' },
    commonCanCancel: { required: true, message: '请选择', trigger: 'blur' },
    memberCanCancel: { required: true, message: '请选择', trigger: 'blur' }
  }
})
const { rules } = toRefs(data)
const form = computed(() => venStore.venueInfo)

function submitForm() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      form.value.commonCancelLimitTime = form.value.commonCancelLimitTime.toString()
      form.value.memberCancelLimitTime = form.value.memberCancelLimitTime.toString()
      venueBasicEdit(form.value).then(() => {
        venStore.setBusinessPeriod([form.value.businessStart, form.value.businessEnd])
        proxy.$modal.msgSuccess('保存成功')
      })
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}
</script>

<style scoped>
	.tdFlex{display: flex;}
.w50 {
	width: 50%;
}
.ml20 {
	margin-left: 20px;
}
</style>
